<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        
        nav {
            width: 100%;
            background-color: #292929;
        }
        
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .container {
            width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        
        .left-nav,
        .right-nav {
            display: flex;
        }
        
        .left-nav li {
            margin: 15px 30px;
        }
        
        .right-nav li {
            margin: 15px 25px;
        }
        
        .container a {
            color: #c7c7c7;
            font-size: 13px;
            text-decoration: none;
        }
        
        .active a {
            color: #CBA45C;
        }
        .active2{
            position: relative;
        }
        .active3,.right-active1{
            position: relative;
        }
        .moves {
            width: 75px;
            height: 60px;
            text-align: center;
             position: absolute;
             top: 30px;
             left: -15px;
             background-color: #292929;
            display: none;
        }
         .moves a{
            display: inline-block;
            width: 75px;
            height: 20px;
            position: relative;
            top: -3px;
            left:-5px;
        }
        .moves1{
            width: 65px;
            height: 125px;
            text-align: center;
             position: absolute;
             top: 30px;
             left: -15px;
             background-color: #292929;
            display: none;
        }
        .moves1 a{
            display: inline-block;
            width: 65px;
            height: 20px;
            position: relative;
            top:-3px;
            left:-5px;
        }
        .moves3{
             width: 105px;
            height: 198px;
            text-align: center;
             position: absolute;
             top: 30px;
             left: -15px;
             background-color: #292929;
             display: none;
        }
        .moves3 a{
            display: inline-block;
            width: 105px;
            height: 25px;
            position: relative;
            top: -13px;
            left:-25px;
           
        }
        
        .moves li,.moves1 li{
            padding: 5px;
            margin: 0;
            list-style: 0;
           
        }
        .active-1:hover .moves1{
            display: block;
        }
        .active-2:hover .moves{
            display: block;
        }
        .active-3:hover .moves3{
            display: block;
        }
        
        section {
            height: 1200px;
        }
    </style>
</head>

<body>
    <div></div>
    <nav>
        <div class="container">
            <ul class="left-nav">
                <li class="active"><a href="#">会员首页</a></li>
                <div class="active-2">
                <li class="active2"><a href="#">看电影</a>
                    <ul class="moves">
                        <li><a href="#">华语电影</a></li>
                        <li><a href="#">海外大片</a></li>
                    </ul>
                </li>
                </div>
                <div class="active-1">
                <li class="active3"><a href="#">看剧</a>
                <ul class="moves1">
                    <li><a href="#">英剧</a></li>
                    <li><a href="#">美剧</a></li>
                    <li><a href="#">港剧</a></li>
                    <li><a href="#">韩剧</a></li>
                    </ul></li>
                </div>
                <li class="active4"><a href="#">看动漫</a></li>
                <li class="active5"><a href="#">纪录片</a></li>
                <li class="active6"><a href="#">德云社</a></li>
                <li class="active7"><a href="#">看直播</a></li>
            </ul>
            <ul class=" right-nav">
                <div class="active-3">
                <li class="right-active1"><a href="#">我的会员</a>
                <ul class="moves3">
                    <li><a href="#">会员福利</a></li>
                    <li><a href="#">会员特权</a></li>
                    <li><a href="#">会员等级</a></li>
                    <li><a href="#">会员套餐</a></li>
                    <li><a href="#">我的帐号</a></li>
                    </ul></li>
                </div>
                <li><a href="#">会员卡</a></li>
            </ul>
        </div>
    </nav>
    <section></section>
</body>

</html>
<script>
    var lias = document.querySelectorAll('.container a')
    for (var i = 1; i < lias.length; i++) {
        lias[i].index = i;
        lias[i].onmouseover = function () {
            lias[this.index].style.color = '#CBA45C';
        }
        lias[i].onmouseout = function () {
            lias[this.index].style.color = '#c7c7c7';
        }
    }
    var a1s=document.querySelectorAll('.moves a')
    for(var i=0;i<a1s.length;i++){
        a1s[i].index=i;
        a1s[i].onmouseover=function(){
            a1s[this.index].style.backgroundColor='#635A49';
        }
         a1s[i].onmouseout=function(){
            a1s[this.index].style.backgroundColor='';
        }
    }
     var a2s=document.querySelectorAll('.moves1 a')
    for(var i=0;i<a2s.length;i++){
        a2s[i].index=i;
        a2s[i].onmouseover=function(){
            a2s[this.index].style.backgroundColor='#635A49';
        }
         a2s[i].onmouseout=function(){
            a2s[this.index].style.backgroundColor='';
        }
    }
     var a3s=document.querySelectorAll('.moves3 a')
    for(var i=0;i<a3s.length;i++){
        a3s[i].index=i;
        a3s[i].onmouseover=function(){
            a3s[this.index].style.backgroundColor='#635A49';
        }
         a3s[i].onmouseout=function(){
            a3s[this.index].style.backgroundColor='';
        }
    }


   


</script>